<script setup lang="ts">
import { onMounted, ref, nextTick } from 'vue'
import results from './data'
const count = 6
// const fakeDataUrl = `https://randomuser.me/api/?results=${count}&inc=name,gender,email,nat,picture&noinfo`

const initLoading = ref(true)
const loading = ref(false)
const data = ref([])
const list = ref([])

const value = ref<string>('')
const theme = ref<string>('')
const keyword = ref<string>('')

interface FormState {
  value: string
  theme: string
  keyword: string
}
const formState = reactive<FormState>({
  value: '',
  theme: '',
  keyword: ''
})

const onSearch = (searchValue: string) => {
  console.log('use value', searchValue)
  console.log('or use this.value', value.value)
}

onMounted(() => {
  //   fetch(fakeDataUrl)
  //     .then((res) => res.json())
  //     .then((res) => {
  //       initLoading.value = false
  //       data.value = res.results
  //       list.value = res.results
  //     })
  setTimeout(() => {
    initLoading.value = false
    data.value = results
    list.value = results
  }, 1000)
})

const onLoadMore = () => {
  loading.value = true
  list.value = data.value.concat([...new Array(count)].map(() => ({ loading: true, name: {}, picture: {} })))
  fetch(fakeDataUrl)
    .then((res) => res.json())
    .then((res) => {
      const newData = data.value.concat(res.results)
      loading.value = false
      data.value = newData
      list.value = newData
      nextTick(() => {
        // Resetting window's offsetTop so as to display react-virtualized demo underfloor.
        // In real scene, you can using public method of react-virtualized:
        // https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized
        window.dispatchEvent(new Event('resize'))
      })
    })
}
</script>

<template>
  <div>
    <a-form
      :model="formState"
      name="horizontal_login"
      layout="inline"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item label="日期：" name="username">
        <a-input v-model:value="formState.date"> </a-input>
      </a-form-item>
      <a-form-item label="主题：" name="password">
        <a-input v-model:value="formState.theme"> </a-input>
      </a-form-item>
      <a-form-item label="关键词：" name="password">
        <a-input v-model:value="formState.keyword"> </a-input>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit">搜索</a-button>
      </a-form-item>
    </a-form>

    <a-list class="demo-loadmore-list" :loading="initLoading" item-layout="horizontal" :data-source="list">
      <template #loadMore>
        <div
          v-if="!initLoading && !loading"
          :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
        >
          <!-- <a-button @click="onLoadMore">loading more</a-button> -->
        </div>
      </template>
      <template #renderItem="{ item }">
        <a-list-item>
          <div class="title">{{ item.title }}</div>
          <div class="sub-title" v-html="item.subTitle"></div>
          <div class="operate">
            <span>{{ item.time }}</span>
            <span>{{ item.site }}</span>
            <span>{{ item.type }}</span>
            <span>转载量：{{ item.count }}</span>
            <span><router-link to="/ssyq/list/detail"> 原文链接 </router-link></span>
          </div>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<style lang="scss" scoped>
.demo-loadmore-list {
  min-height: 350px;
}
.ant-list .ant-list-item {
  display: block;
  text-align: left;
  .title {
    font-size: 22px;
    font-weight: bold;
  }

  .sub-title {
    color: #c0c0c0;
  }

  .operate {
    > span:nth-child(1) {
      color: #c0c0c0;
    }
    > span:nth-child(2) {
      color: #c0c0c0;
      margin-left: 15px;
    }
    > span:nth-child(3) {
      color: #fff;
      background: orange;
      margin-left: 15px;
      border-radius: 25px;
      padding: 3px;
    }
    > span:nth-child(4) {
      color: #c0c0c0;
      margin-left: 15px;
    }
    > span:nth-child(5) {
      margin-left: 15px;
    }
  }
  li:nth-child(odd) {
    background-color: red;
  }
}
.ant-list-item:nth-child(odd) {
  background-color: #ffffff;
}
.ant-list-item:nth-child(even) {
  background-color: #e6f4ff;
}
</style>
